<template>
	<div class="indicator">
		<div class="item" v-for="(item, itemKey) in dataSource" :key="itemKey">
			<h3 class="title">
				<i class="iconfont">{{ words[itemKey] }}</i>
				<p v-show="itemKey !== showEdit">
					{{ item.indicatorName }}
				</p>
				<a-input
					v-show="itemKey === showEdit"
					:value="item.indicatorName"
					@pressEnter="handleTitle($event, itemKey)"
				/>
				<a-icon type="edit" class="edit" @click="handeEdit(itemKey)" />
			</h3>
			<!-- 标题 over -->
			<div class="exponent">
				<Indicators
					class="btn"
					:item="item"
					:itemKey="itemKey"
					:projectId="projectId"
					@changeEvent="handleEvent"
				/>
				<span class="word">的</span>
				<IndicatorsAttr
					class="btn"
					:item="item"
					:itemKey="itemKey"
					:projectId="projectId"
					:eventCode="eventCode"
					@changeAggregator="handleAggregator"
				/>
				<IndicatorsOperation
					class="icon"
					:item="item"
					:sum="sum"
					:itemKey="itemKey"
					@addCondition="handleAddCondition"
					@copyIndicators="handleCopyIndicators"
					@delIndicators="handleDelIndicators"
				/>
			</div>
			<!-- 指数 over -->
			<div
				:class="`condition ${
					item.filter.conditions && item.filter.conditions.length >= 2 ? 'has-logic' : ''
				}`"
				v-if="item.filter"
			>
				<div
					class="condition-item"
					v-for="(obj, pkey) in item.filter.conditions"
					:key="obj.renderIndex"
				>
					<template v-if="!obj.conditions">
						<Conditions
							class="btn"
							:level="'parent'"
							:item="obj"
							:pkey="pkey"
							:itemKey="itemKey"
							:projectId="projectId"
							:eventCode="eventCode"
							@changeConditionAttr="handleConditionAttr"
						/>
						<ConditionFunction
							class="btn"
							:level="'parent'"
							:item="obj"
							:pkey="pkey"
							:itemKey="itemKey"
							:dataType="dataType"
							@changeAttrFunction="handleAttrFunction"
						/>
						<ConditionValue
							:item="obj"
							:level="'parent'"
							:pkey="pkey"
							:itemKey="itemKey"
							:projectId="projectId"
							:attrCode="attrCode"
							:attrType="attrType"
							:dataType="dataType"
							@changeSelectValue="handleSelectValue"
							@changeInputValue="handleInputValue"
							:functionCode="functionCode"
						/>
						<ConditionOperation
							class="icon"
							:level="'parent'"
							:item="obj"
							:pkey="pkey"
							:itemKey="itemKey"
							:pSum="item.filter.conditions.length"
							@addSubCondition="handleSubCondition"
							@DelCondition="handleDelCondition"
						/>
					</template>
					<template v-else>
						<div :class="`sub-children ${obj.conditions.length >= 2 ? 'has-logic' : ''}`">
							<div class="condition-item" v-for="(o, skey) in obj.conditions" :key="o.renderIndex">
								<Conditions
									class="btn"
									:level="'sub'"
									:item="o"
									:pkey="pkey"
									:subkey="skey"
									:itemKey="itemKey"
									:projectId="projectId"
									:eventCode="eventCode"
									@changeConditionAttr="handleConditionAttr"
								/>
								<ConditionFunction
									class="btn"
									:item="o"
									:level="'sub'"
									:pkey="pkey"
									:subkey="skey"
									:itemKey="itemKey"
									:dataType="dataType"
									@changeAttrFunction="handleAttrFunction"
								/>
								<ConditionValue
									:item="o"
									:level="'sub'"
									:pkey="pkey"
									:subkey="skey"
									:itemKey="itemKey"
									:projectId="projectId"
									:attrCode="attrCode"
									:attrType="attrType"
									:dataType="dataType"
									:functionCode="functionCode"
									@changeSelectValue="handleSelectValue"
									@changeInputValue="handleInputValue"
								/>
								<ConditionOperation
									class="icon"
									:level="'sub'"
									:item="obj"
									:pkey="pkey"
									:subkey="skey"
									:itemKey="itemKey"
									:sum="obj.conditions.length"
									@addSubCondition="handleSubCondition"
									@DelCondition="handleDelCondition"
								/>
							</div>

							<span class="sub logic" v-if="obj.conditions.length >= 2">
								<em
									:class="`${obj.relation === 'and' ? 'current' : ''}`"
									@click="changeLogic('and', itemKey, pkey)"
								>
									且
								</em>
								<em
									:class="`${obj.relation === 'or' ? 'current' : ''}`"
									@click="changeLogic('or', itemKey, pkey)"
								>
									或
								</em>
							</span>
						</div>
					</template>
				</div>
				<span class="logic" v-if="item.filter.conditions.length >= 2">
					<em
						:class="`${item.filter.relation === 'and' ? 'current' : ''}`"
						@click="changeLogic('and', itemKey, '')"
					>
						且
					</em>
					<em
						:class="`${item.filter.relation === 'or' ? 'current' : ''}`"
						@click="changeLogic('or', itemKey, '')"
					>
						或
					</em>
				</span>
			</div>
			<!-- 条件over -->
		</div>
		<div class="add-icon">
			<span @click="newAddIndicators">
				<a-icon type="plus-circle" class="iconfont" />
				添加指标
			</span>
			<!-- <span>
				<a-icon type="plus-circle" />
				自定义指标
			</span> -->
		</div>
	</div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import {
	Indicators,
	IndicatorsAttr,
	IndicatorsOperation,
	Conditions,
	ConditionFunction,
	ConditionOperation,
	ConditionValue,
	CustomFilter
} from '@/components/screen/components/index'
import { words } from '../data/iconWord'
import '../components/style/style.scss'
import _ from 'lodash'

@Component({
	name: 'EventsAnalysis',
	components: {
		Indicators,
		IndicatorsAttr,
		IndicatorsOperation,
		Conditions,
		ConditionFunction,
		ConditionValue,
		ConditionOperation,
		CustomFilter
	}
})
export default class extends Vue {
	@Prop() projectId!: number
	@Prop() defaultData!: any
	@Prop() defaultCondition!: { [key: string]: any }
	@Prop() defaultIindicators!: { [key: string]: any }
	@Prop() defaultGroups!: { [key: string]: any }
	@Prop() isShowTit!: any

	private words = words
	private showEdit = this.isShowTit
	private curTitle = false

	private dataSource = _.cloneDeep(this.defaultData)
	private sum = this.dataSource.length
	private addDefaultIindicators = this.defaultIindicators
	private addDefaultCondition = this.defaultCondition

	private eventCode: string = this.defaultIindicators.eventCode
	private attrCode: string = this.defaultCondition.attr.attrCode
	private attrType: string = this.defaultCondition.attr.attrType
	private dataType: string = this.defaultCondition.attr.dataType
	private functionCode: string = this.addDefaultCondition.functionCode
	/*
		indicators：指标[itemKey]
		filter.conditions：条件[pkey]
		filter.conditions[subkey].conditions: 子条件
  */

	// 指数切换
	private handleEvent(params: { e: any; eventkey: number; itemKey: number }) {
		const { e, itemKey } = params
		const data = _.cloneDeep(this.dataSource)
		this.eventCode = e.item.value

		const title = data[itemKey].indicatorName.split('的')
		title[0] = e.item.title
		data[itemKey].indicatorName = title.join('的')
		data[itemKey].eventCode = e.item.value
		data[itemKey].eventAlias = e.item.title
		this.dataSource = _.cloneDeep(data)
	}
	// 指数属性切换
	private handleAggregator(params: { e: any; itemKey: number }) {
		const { e, itemKey } = params
		const val = e.item.value
		const name = e.item.title
		const data = _.cloneDeep(this.dataSource)
		const title = data[itemKey].indicatorName.split('的')

		if (e.item.value.indexOf('---') != -1) {
			data[itemKey].eventAttr = {
				attrCode: val.split('---')[0],
				attrName: name.split('的')[0]
			}
			data[itemKey].aggregatorCode = val.split('---')[1]
			data[itemKey].aggregatorAlias = name.split('的')[1]
			title[1] = name.split('的')[0] + name.split('的')[1]
			data[itemKey].indicatorName = title.join('的')
		} else {
			data[itemKey].eventAttr = {
				attrCode: '',
				attrName: ''
			}
			data[itemKey].aggregatorCode = val
			data[itemKey].aggregatorAlias = name
			title[1] = name
			data[itemKey].indicatorName = title.join('的')
		}

		this.dataSource = _.cloneDeep(data)
	}
	// 切换条件
	private handleConditionAttr(params: any) {
		const { e, type, level, itemKey, pkey, subkey } = params
		this.attrType = type

		if (level === 'parent') {
			const data = _.cloneDeep(this.dataSource)
			data[itemKey].filter.conditions[pkey].attr = {
				attrType: type,
				dataType: e.item.role,
				attrCode: e.item.value,
				attrName: e.item.title
			}
			this.dataSource = _.cloneDeep(data)
			this.attrCode = e.item.value
			this.dataType = e.item.role
		} else {
			const data = _.cloneDeep(this.dataSource)
			data[itemKey].filter.conditions[pkey].conditions[subkey].attr = {
				attrType: type,
				dataType: e.item.role,
				attrCode: e.item.value,
				attrName: e.item.title
			}

			this.dataSource = _.cloneDeep(data)
			this.attrCode = e.item.value
			this.dataType = e.item.role
		}
	}
	// 切换条件计算方式
	private handleAttrFunction(params: any) {
		const { e, level, pkey, subkey, itemKey } = params
		if (level === 'parent') {
			const data = _.cloneDeep(this.dataSource)
			data[itemKey].filter.conditions[pkey].functionCode = e.item.value
			data[itemKey].filter.conditions[pkey].functionAlias = e.item.title
			this.dataSource = _.cloneDeep(data)
		} else {
			const data = _.cloneDeep(this.dataSource)
			data[itemKey].filter.conditions[pkey].conditions[subkey].functionCode = e.item.value
			data[itemKey].filter.conditions[pkey].conditions[subkey].functionAlias = e.item.title
			this.dataSource = _.cloneDeep(data)
		}
	}
	// 条件值
	private handleSelectValue(params: any) {
		const { value, level, pkey, subkey, itemKey } = params
		if (level === 'parent') {
			const data = _.cloneDeep(this.dataSource)
			data[itemKey].filter.conditions[pkey].params = value
			this.dataSource = _.cloneDeep(data)
		} else {
			const data = _.cloneDeep(this.dataSource)
			data[itemKey].filter.conditions[pkey].conditions[subkey].params = value
			this.dataSource = _.cloneDeep(data)
		}
	}
	// 条件区间值
	private handleInputValue(params: any) {
		const { value, level, pkey, subkey, itemKey } = params

		if (level === 'parent') {
			const data = _.cloneDeep(this.dataSource)
			data[itemKey].filter.conditions[pkey].params = value
			this.dataSource = _.cloneDeep(data)
		} else {
			const data = _.cloneDeep(this.dataSource)
			data[itemKey].filter.conditions[pkey].conditions[subkey].params = value
			this.dataSource = _.cloneDeep(data)
		}
		console.log('Input dataSource: ', this.dataSource)
	}
	// 条件逻辑切换
	private changeLogic(logic: string, itemKey: number, pkey: number) {
		if (!pkey) {
			const data = _.cloneDeep(this.dataSource)
			data[itemKey].filter.relation = logic
			this.dataSource = _.cloneDeep(data)
		} else {
			const data = _.cloneDeep(this.dataSource)
			data[itemKey].filter.conditions[pkey].relation = logic
			this.dataSource = _.cloneDeep(data)
		}
	}
	// 显示编辑title
	private handeEdit(itemKey: number) {
		if (this.showEdit === itemKey) {
			this.showEdit = null
		} else {
			this.showEdit = itemKey
		}
		this.curTitle = true
	}
	// 编辑title
	private handleTitle(e: any, itemKey: number) {
		const { value } = e.target
		const data = _.cloneDeep(this.dataSource)
		data[itemKey].indicatorName = value
		this.dataSource = _.cloneDeep(data)
		if (this.showEdit === itemKey) {
			this.showEdit = null
		} else {
			this.showEdit = itemKey
		}
	}
	// 添加指数
	private newAddIndicators() {
		this.dataSource = _.cloneDeep(this.dataSource)
		this.dataSource.push(this.addDefaultIindicators)
		this.sum = this.dataSource.length // 用于判断显示 X指数
	}
	// 复制指数
	private handleCopyIndicators(item: any) {
		this.dataSource = _.cloneDeep(this.dataSource)
		this.dataSource.push(item)
		this.sum = this.dataSource.length // 用于判断显示 X指数
	}
	// 删除指数
	private handleDelIndicators(itemKey: number) {
		let data = _.cloneDeep(this.dataSource)
		const result = data.filter((obj: any, key: number) => {
			return key !== itemKey
		})
		this.dataSource = [].concat(result)
		this.sum = this.dataSource.length
	}
	// 增加条件：点击筛选icon
	private handleAddCondition(itemKey: number) {
		this.dataSource = _.cloneDeep(this.dataSource)
		const length = this.dataSource[itemKey].filter.conditions.length

		let newCondition = {
			renderIndex: length, //+1
			...this.addDefaultCondition
		}

		// this.functionCode = this.addDefaultCondition.functionCode
		this.dataSource[itemKey].filter.relation = length >= 1 ? 'and' : ''
		this.dataSource[itemKey].filter.conditions.push(newCondition)
	}
	// &操作
	private handleSubCondition(params: any) {
		const { level, pkey, itemKey } = params //item
		if (level === 'sub') {
			const target = this.dataSource[itemKey].filter.conditions[pkey].conditions
			const data = _.cloneDeep(this.dataSource)
			const newCondition = {
				renderIndex: target.length,
				...this.addDefaultCondition
			}
			data[itemKey].filter.conditions[pkey].conditions.push(newCondition)
			this.dataSource = _.cloneDeep(data)
		} else {
			const curItem = this.dataSource[itemKey].filter.conditions[pkey]
			delete curItem.renderIndex
			// 组合新增条件
			let newCondition = {
				relation: 'and',
				renderIndex: pkey,
				conditions: [
					{
						renderIndex: 0,
						...curItem
					},
					{
						renderIndex: 1,
						...this.addDefaultCondition
					}
				]
			}
			const target = this.dataSource[itemKey].filter.conditions

			// 替换新增条件
			const res = target.map((item: any) => {
				return item.renderIndex === curItem.renderIndex ? newCondition : item
			})
			const data = _.cloneDeep(this.dataSource)
			data[itemKey].filter.conditions = res
			this.dataSource = _.cloneDeep(data)
		}
	}
	// 删除条件
	private handleDelCondition(params: any) {
		const { level, pkey, subkey, itemKey, item } = params
		let result
		let target
		if (level === 'sub') {
			target = this.dataSource[itemKey].filter.conditions[pkey].conditions
			let filterResult = target.filter((obj: any) => {
				return obj.renderIndex !== item.conditions[subkey].renderIndex
			})
			if (filterResult.length <= 1) {
				const single = _.cloneDeep(filterResult)
				delete single[0].renderIndex
				result = {
					renderIndex: `${subkey}`,
					...single[0]
				}
				const data = _.cloneDeep(this.dataSource)
				data[itemKey].filter.conditions[pkey] = result
				this.dataSource = _.cloneDeep(data)
			} else {
				result = filterResult
				const data = _.cloneDeep(this.dataSource)
				data[itemKey].filter.conditions[pkey].conditions = result
				this.dataSource = _.cloneDeep(data)
			}
		} else {
			target = this.dataSource[itemKey].filter.conditions
			let filterResult = target.filter((obj: any) => {
				return obj.renderIndex !== item.renderIndex
			})

			if (filterResult.length == 1 && filterResult[0].conditions) {
				const single = _.cloneDeep(filterResult)
				result = {
					relation: single[0].relation,
					conditions: [...single[0].conditions]
				}
				const data = _.cloneDeep(this.dataSource)
				data[itemKey].filter = result
				this.dataSource = _.cloneDeep(data)
			} else {
				result = filterResult
				const data = _.cloneDeep(this.dataSource)
				data[itemKey].filter.conditions = result
				this.dataSource = _.cloneDeep(data)
			}
		}
	}

	@Watch('dataSource')
	private ChangedIndicatorsData() {
		const data = this.dataSource.map((item: any) => {
			return {
				...item,
				indicatorName:
					item.eventAttr.attrName === ''
						? item.eventAlias + '的' + item.aggregatorAlias
						: item.eventAlias + '的' + item.eventAttr.attrName + item.aggregatorAlias
			}
		})

		this.$emit('ChangedIndicatorsData', data)
	}
}
</script>
